import React,{ useState, useEffect } from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { getLeftMenu } from '@/utils/api';
import style from "./index.css";

const { Header, Content, Sider } = Layout;

const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
  (icon, index) => {
    const key = String(index + 1);

    return {
      key: `sub${key}`,
      icon: React.createElement(icon),
      label: `subnav ${key}`,

      children: new Array(4).fill(null).map((_, j) => {
        const subKey = index * 4 + j + 1;
        return {
          key: subKey,
          label: `option${subKey}`,
        };
      }),
    };
  },
);

const IndexPage: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  
  const [menu,setMenu]= useState<MenuProps['items']>([]);

  const getTabLeftMenu = async () => {
    let res = await getLeftMenu();
    // items1.push
    let itemH:any[] = [];

      res.data.map((item:any,index:number) =>{
    
        itemH.push({
            key:item?.id,
            icon:React.createElement('UserOutlined'),
            label:item?.name
          });
      });
      
    setMenu(itemH);
  } 


  useEffect(() => {
    // 仅在组件挂载后执行状态更新
    getTabLeftMenu();
  }, []);
  // 初始化获取左侧菜单
  

  return (
    <div className={style.pageBody}>
      <Layout className={style.pageLayout} >
        <Header style={{ display: 'flex', alignItems: 'center',  padding: '0 15px' }} >
          <div className={style.pageLogo} />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['20']}
            items={menu}
            style={{ flex: 1, minWidth: 0 }}
          />
        </Header>
        <Layout>
          <Sider width={200} style={{ background: colorBgContainer }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
              items={items2}
            />
          </Sider>
          <Layout style={{ padding: '24px 24px 24px' }}>
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              Content
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
};

export default IndexPage;